<template>
  <div class="content">
    <img class="fix" :src="song.al.picUrl" alt="">
    <div class="cover"></div>
    <div>
      <img class="play" src="../../assets/icon/play-item.png">
    </div>
    <div class="music">
      <img class="pan" src="../../assets/icon/pan.png">
      <img class="img" :src="song.al.picUrl" alt="">
    </div>
    <div class="text">{{song.al.name}}</div>
    <div class="audio">
      <audio :src="url" controls autoplay loop></audio>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      song: "",
      url:""
    };
  },
  mounted() {
    var { id } = this.$route.params;
    
    this.$http(`http://47.108.197.28:3000/song/detail?ids=${id}`).then(
      (res) => {

        this.song = res.data.songs[0];
       
      }
    );
    this.$http(`http://47.108.197.28:3000/song/url?id=${id}`).then(res=>{
       console.log(this.id);
      this.url = res.data.data[0].url
      console.log(this.url);
    })
  },
};
</script>

<style scoped>
.content{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 28px;
}
.fix{
  width: 100%;
  height: 100%;
  position: fixed;
  transform: translateX(-50%);
  z-index: -1;
}
.cover{
   width: 100%;
  height: 100%;
  position: fixed;
  background: rgb(0,0,0,.3);
}
.music{
  position: relative;
}
.text{
  padding: 50px 0;
}
.play{
  width: 150px;
  position: relative;
  top: 85px;
  left: 20px;
  z-index: 100;
}
.img{
  position: absolute;
  width: 260px;
  border-radius: 50%;
  left: 33%;
  top: 21%;
}
.pan{
  width: 450px;
}

</style>